<template>
  <div class="activity-detail-admin">
    <el-header class="header">
      <div class="header-content">
        <div class="logo">
          <h2>🏃‍♂️ 健身活动管理系统</h2>
        </div>
        <div class="nav">
          <el-button @click="$router.push('/admin/dashboard')" type="primary">仪表板</el-button>
          <el-button @click="$router.push('/admin/activities')">活动管理</el-button>
          <el-button @click="$router.push('/admin/bookings')">预约管理</el-button>
          <el-button @click="logout" type="danger">退出登录</el-button>
        </div>
      </div>
    </el-header>
    <el-main class="main-content">
      <el-card v-if="activity" class="detail-card">
        <template #header>
          <div class="card-header">
            <span>📋 活动详情</span>
            <div class="header-actions">
              <el-button type="primary" @click="editActivity">编辑活动</el-button>
              <el-button type="danger" @click="cancelActivity" v-if="activity.status === 1">
                取消活动
              </el-button>
            </div>
          </div>
        </template>

        <div class="activity-content">
          <div class="activity-header">
            <h1>{{ activity.title }}</h1>
            <el-tag :type="activity.status === 1 ? 'success' : 'danger'">
              {{ activity.status === 1 ? '正常' : '已取消' }}
            </el-tag>
          </div>
          
          <div class="activity-info-grid">
            <div class="info-section">
              <h3>基本信息</h3>
              <div class="info-item">
                <span class="label">活动描述：</span>
                <span class="value">{{ activity.description }}</span>
              </div>
              <div class="info-item">
                <span class="label">活动地点：</span>
                <span class="value">{{ activity.location }}</span>
              </div>
              <div class="info-item">
                <span class="label">开始时间：</span>
                <span class="value">{{ formatTime(activity.startTime) }}</span>
              </div>
              <div class="info-item">
                <span class="label">结束时间：</span>
                <span class="value">{{ formatTime(activity.endTime) }}</span>
              </div>
            </div>
            
            <div class="info-section">
              <h3>参与信息</h3>
              <div class="info-item">
                <span class="label">最大参与人数：</span>
                <span class="value">{{ activity.maxParticipants }}</span>
              </div>
              <div class="info-item">
                <span class="label">当前参与人数：</span>
                <span class="value">{{ activity.currentParticipants }}</span>
              </div>
              <div class="info-item">
                <span class="label">剩余名额：</span>
                <span class="value">{{ activity.maxParticipants - activity.currentParticipants }}</span>
              </div>
              <div class="info-item">
                <span class="label">活动价格：</span>
                <span class="value price">¥{{ activity.price }}</span>
              </div>
            </div>
            
            <div class="info-section" v-if="activity.remark">
              <h3>备注信息</h3>
              <div class="info-item">
                <span class="value">{{ activity.remark }}</span>
              </div>
            </div>
          </div>
          
          <div class="action-buttons">
            <el-button @click="$router.push('/admin/activities')" size="large">返回列表</el-button>
            <el-button type="primary" size="large" @click="editActivity">编辑活动</el-button>
          </div>
        </div>
      </el-card>
      
      <el-empty v-else description="活动不存在" />
    </el-main>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { activityApi } from '@/api'
import dayjs from 'dayjs'

const router = useRouter()
const route = useRoute()

const activity = ref(null)

const loadActivityDetail = async () => {
  try {
    const id = route.params.id
    const res = await activityApi.getActivityDetail(id)
    activity.value = res.data.activity
  } catch (error) {
    console.error('加载活动详情失败:', error)
    ElMessage.error('加载活动详情失败')
  }
}

const editActivity = () => {
  router.push(`/admin/activity/edit/${activity.value.id}`)
}

const cancelActivity = async () => {
  try {
    await ElMessageBox.confirm('确定要取消这个活动吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await activityApi.cancelActivity(activity.value.id)
    ElMessage.success('活动取消成功')
    loadActivityDetail()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('取消活动失败:', error)
    }
  }
}

const logout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('userInfo')
  ElMessage.success('退出登录成功')
  router.push('/login')
}

const formatTime = (time) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm')
}

onMounted(() => {
  loadActivityDetail()
})
</script>

<style scoped>
.activity-detail-admin {
  min-height: 100vh;
  background: #f5f7fa;
}

.header {
  background: white;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.logo h2 {
  margin: 0;
  color: #333;
}

.nav .el-button {
  margin-left: 10px;
}

.main-content {
  padding: 20px;
}

.detail-card {
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 15px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f0f0;
}

.activity-header h1 {
  margin: 0;
  color: #333;
  font-size: 2em;
}

.activity-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 30px;
}

.info-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 10px;
  border-left: 4px solid #667eea;
}

.info-section h3 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 1.2em;
}

.info-item {
  display: flex;
  margin-bottom: 10px;
  align-items: flex-start;
}

.label {
  font-weight: bold;
  color: #333;
  min-width: 120px;
  flex-shrink: 0;
}

.value {
  color: #666;
  flex: 1;
}

.value.price {
  color: #e74c3c;
  font-size: 18px;
  font-weight: bold;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding-top: 20px;
  border-top: 2px solid #f0f0f0;
}

@media (max-width: 768px) {
  .activity-info-grid {
    grid-template-columns: 1fr;
  }
  
  .header-actions {
    flex-direction: column;
  }
}
</style> 